const path = require('path') // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: undefined,
        // 文件名（入口文件打包输出文件名）
        filename: 'static/js/main.js',
        // 自动清空上一次的打包的内容
        // 原理：在打包前，将 path 整个目录内容清空，再进行打包
        clean: true,
    },
    // 加载器
    module: {
        rules: [
            // loader 的配置
            {
                test: /\.css$/i,
                // 执行顺序是从下往上，从右往左
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/i,
                // 使用 loader 属性的话，只能引入一个 loader
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.s[ac]ss$/i,
                // 执行顺序是从下往上，从右往左
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.styl$/i,
                use: ["style-loader", "css-loader", "stylus-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转成base64
                        // 优点：减少请求数量 缺点：体积会更大
                        maxSize: 100 * 1024 // 100kb
                    }
                },
                generator: {
                    // 输出图片名称
                    // [hash: 10] hash 值取前 10 位
                    filename: "static/images/[hash:10][ext][query]"
                }
            },            
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    // 输出名称
                    filename: "static/media/[hash:10][ext][query]",
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除其中的js文件
                loader: "babel-loader",
                options: {
                    // presets: ["@babel/preset-env"],
                }
            }
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 模板：以 public/index.html 文件创建的html文件
            // 新的 html 文件特点：1.结构和原来一致 2.自动引入打包输出资源
            template: path.resolve(__dirname, "../public/index.html"),
        })
    ],
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动
        open: true // 是否自动打开浏览器
    },
    // 模式
    mode: 'development'
}